<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .headerLeft img {
            height: 60px;
            width: 60px;
        }
        .center {
            background: white;
            width: 100%;
            height: 100vh;
            border-radius: 12px;
            margin-top: 20px;
        }


        .centerTop {
            width: 98%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-left: 10px;
        }

        .centerTopRight {

        }

        .centerTopRight p {
            display: inline;
            line-height: 50px;
            font-family: 仿宋;
            font-size: 12px;
        }

        .centerCenter {
            width: 98%;
            height: 150px;
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-left: 10px;
            margin-top: 30px;
        }

        .centerCenter {
            height: 150px;
            width: 100%;
            display: flex;
        }

        .centerCenter img {
            height: 150px;
            width: 110px;
            border-radius: 4px;
        }

        .centerContent {
            width: 100%;
            margin-left: 20px;
        }

        .manage {
            margin-right: 25px;
            width: 250px;
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
<div id="book">
    <div class="center">
        <div class="book">
            <div class="centerTop">
                <p style="font-weight: bold">我的小说</p>
                <div class="centerTopRight">
                    <p @click="addBookHandle()" style="cursor: pointer">创建新书</p>
                </div>
            </div>
            <div class="centerCenter" v-for="book in books" :key="book.id">
                <el-image style="height: 150px;width: 110px;
                border-radius: 4px;cursor: pointer;"
                          :src="getImage(book.image)">
                    <div slot="error" class="image-slot">
                        <img src="./../../images/icons/btn_back@2x.png"
                             style="height: 150px;width: 110px; border:none;">
                    </div>
                </el-image>
                <div class="centerContent">
                    <div style="">
                        <p>{{ book.name }}</p>
                        <p style="font-family: 仿宋;font-size: 12px;color: #3636367c;">
                            最近更新: 第{{ book.chapterNumber || 0 }}章&nbsp;{{ book.chapterTitle }}
                        </p>
                    </div>
                    <div style="display: flex;justify-content: space-between">
                        <p style="font-family: 仿宋;font-size: 12px;color: #3636367c;">
                            {{ book.chapterNumber || 0 }}章&nbsp;&nbsp;|&nbsp;&nbsp;{{ book.wordCount || 0 }}字&nbsp;&nbsp;|&nbsp;&nbsp;{{
                                book.message
                            }}
                        </p>
                        <div class="manage">
                            <el-row>
                                <el-button round @click="editBookChapterHandle(book.id)">章节管理</el-button>
                                <el-button type="primary" round @click="addBookChapterHandle(book.id)">创建章节</el-button>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/book.js"></script>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script>
    new Vue({
        el: '#book',
        data() {
            return {
                books: [], // 存储书籍数据的数组
                userInfo: {},
            };
        },
        created() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            // 从后端获取书籍数据并赋值给books数组
            const authorId = this.userInfo.id;
            this.init(authorId);
        },
        methods: {
            async init(authorId) {
                //获取作品信息
                fetchBooks(authorId).then(res => {
                    if (String(res.code) === '200') {
                        this.books = res.data.data
                    } else {
                        this.$message.error(res.msg || '系统错误')
                    }
                })
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
            //章节管理
            editBookChapterHandle(bookId) {
                window.parent.menuHandle({
                    id: '10',
                    url: '/author/page/bookManage/edit.html?bookId=' + bookId,
                    name: '章节管理'
                }, true);
            },
            //添加新章节
            addBookChapterHandle(bookId) {
                window.parent.menuHandle({
                    id: '9',
                    url: '/author/page/bookManage/add.html?bookId=' + bookId,
                    name: '创建章节'
                }, true);
            },
            // 添加
            addBookHandle() {
                window.parent.menuHandle({
                    id: '2',
                    url: '/author/page/book/add.html',
                    name: '创建作品'
                }, true)
            },
        },
    });
</script>
</body>
</html>